<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import { useUserStore } from '@/store/user';
import { getMessageCaptchaApi, registerApi } from '@/apis/user';
import useGetMessage from '@/hooks/useGetMessageCaptcha.js';
import { MESSAGE_REGISTER } from '@/constant/messageCaptchaType';

const userStore = useUserStore();
const route = useRoute();
const router = useRouter();

const formEl = ref(null)

const codeButton = ref(null)

const { getMessageCaptcha } = useGetMessage();


//注册
const register = async () => {
  const { phone, messageCaptcha, password, confirmPassword } = form.value
  //formEl是elementUI的表单对象，validate方法可以校验表单是否合法
  formEl.value.validate(async (valid) => {

    //valid是校验结果，true表示校验通过，false表示校验失败
    if (valid) {
      //登录接口
      try {
        await registerApi({ phone, messageCaptcha, password, confirmPassword })

        //登录成功后跳转到首页
        ElMessage({ type: 'success', message: '注册成功' })

        //延时1s后跳转到登录页
        setTimeout(() => {
          router.push('/login/passwordLogin')
        }, 1000)
      } catch (error) {

      }
    }
  })
}


//发送手机短信验证
const getMessage = () => {
  formEl.value.validateField('phone', (valid) => {
    if (valid) {
      getMessageCaptcha(codeButton, 'registerCount')

      // 发送请求
      //调用发送短信接口
      /*       getMessageCaptchaApi({
              phone: form.value.phone,
              captchaType: MESSAGE_REGISTER,
            }) */
    }
  })
}


const btnIsHappen = ref(false)

//准备一个和校验项一致的双向绑定数据
const form = ref({
  phone: '',
  password: '',
  confirmPassword: '',
  messageCaptcha: '',
})

//准备一个校验规则
const rules = {
  //每一个表单项对应一个数组，数组内可以定义多个对象
  phone: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 9, max: 20, message: '密码不能小于9位或大于20位', trigger: 'blur' },
  ],
  confirmPassword: [
    { required: true, message: '再次确认密码不能为空', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== form.value.password) {
          callback(new Error('与原密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'change',
    }
  ],
  messageCaptcha: [
    { required: true, message: '验证码不能为空', trigger: 'blur' },
    { min: 4, max: 4, message: '验证码长度为4位', trigger: 'blur' },
  ],
}


// #region  全局路由组件有问题，搞不明白，现在先搞这个返回登录的按钮
const handleGoLogin = () => {
  router.push('/login/passwordLogin')
}
// #endregion




onMounted(() => {
  let count = localStorage.getItem('registerCount')
  if (count) {
    codeButton.value.disabled = true
    getMessageCaptcha(codeButton, 'registerCount')

  }
})

</script>

<template>

  <div class="title">
    <svg-icon class="back" @click="handleGoLogin" name="zuojiantou"></svg-icon>
    <h2>注册中( ๑╹ ꇴ╹) ｸﾞｯ! </h2>
  </div>

  <div class="form">
    <!-- :model 是elementUI的一个属性，把响应式数据form和这个表单关联在一起, :rules 是elementUI的一个属性，把这个from和一个规则对象绑定在一起-->
    <el-form :model="form" :rules="rules" ref="formEl" label-position="right" label-width="60px" status-icon>

      <el-form-item label-width="79px" prop="phone" label="手机号">
        <el-input v-model="form.phone" placeholder="请输入手机号" size="large" />
      </el-form-item>
      <!-- 密码 -->
      <el-form-item label-width="79px" prop="password" label="密码 ">
        <el-input v-model="form.password" type="password" show-password placeholder="请输入密码" size="large" />
      </el-form-item>

      <!-- 确认密码 -->
      <el-form-item label-width="79px" prop="confirmPassword" label="确认密码 ">
        <el-input v-model="form.confirmPassword" type="password" show-password placeholder="再次输入密码" size="large" />
      </el-form-item>


      <!-- 验证码 -->
      <el-form-item label-width="79px" prop="messageCaptcha" label="验证码">
        <el-input v-model="form.messageCaptcha" placeholder="验证码随便填，不影响功能" size="large" />
        <div class="codeBtn">
          <button :disabled="codeBtn" @click="getMessage" ref="codeButton"> 获取验证码</button>
        </div>
      </el-form-item>

      <el-button size="large" class="subBtn" @click="register">立即注册</el-button>
    </el-form>

  </div>



</template>

<style lang='scss' scoped>
.title {
  font-size: 2rem;
  display: flex;
  align-items: center;
  margin-bottom: 30px;

  & .back:hover {
    cursor: pointer;

  }

  & h2 {
    margin: 0 auto;
  }
}


.form {

  .subBtn {
    margin-top: 20px;
    width: calc(100% - 20px);
    margin-left: 20px;
    background-color: rgb(255, 98, 0);
    color: white;
  }

  .codeBtn {
    position: absolute;
    right: 10px;
    background-color: white;

    & button {
      color: rgb(255, 98, 0)
    }
  }


  @media screen and (min-width: 768px) {
    .login-box {
      border-radius: 15px;
      height: 60vh;
      width: 50rem;
      margin: 15vh auto;


    }
  }

  @media screen and (max-width: 767px) {
    .login-box {
      height: 100vh;
      width: 100vw;
      // margin: 15vh auto;
      background-color: rgba(255, 255, 255, 1);
    }
  }


}
</style>
